@(name: String, uuid: String)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="@routes.Assets.at("images/favicon.png")">

    <title>Poker : Game room</title>

    <!-- Bootstrap core CSS -->
    <link href="@routes.Assets.at("stylesheets/bootstrap.css")" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="@routes.Assets.at("stylesheets/offcanvas.css")" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->

    <!-- scalable cards -->
    <script src="@routes.Assets.at("javascripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/underscore-min.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/backbone-min.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/hogan-2.0.0.min.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("playing-cards/playingcards.js")" type="text/javascript"></script>
    <link href="@routes.Assets.at("playing-cards/playingcards.css")" rel="stylesheet">
    <link href="@routes.Assets.at("stylesheets/bootstrap-spinedit.css")" rel="stylesheet">
  </head>

    <div class="container">

      <div class="row row-offcanvas row-offcanvas-right">
        <div class="col-xs-12 col-sm-9">
          <p class="pull-right visible-xs">
            <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
          </p>
          <div class="jumbotron">
              <div class="row" style="height:155px">
                <!-- <div class="col-md-6 col-md-offset-2" style="width: 490px; padding-left: 45px;"> -->
                <div class="col-md-2"></div>
                <span class="badge evaluation player2">Full House</span>
                <div class="col-md-8" style="padding-left: 35px;" id="p2">
                  <div id="p2-card-4"></div>
                  <div id="p2-card-3"></div>
                  <div id="p2-card-2"></div>
                  <div id="p2-card-1"></div>
                  <div id="p2-card-0"></div>
                </div>
                <div class="col-md-2"></div>
              </div>
              <div class="row" style="height: 260px">
                  <div class="col-md-3">
                    <span class="badge evaluation player1">Full House</span>
                    <div style="width:100px" id="p1">
                      <div id="p1-card-0"></div>
                      <div id="p1-card-1"></div>
                      <div id="p1-card-2"></div>
                      <div id="p1-card-3"></div>
                      <div id="p1-card-4"></div>
                    </div>
                  </div>
                  <div class="col-md-6 table-center">
                    <div class="row" style="height:50px">
                      <div class="pagination-centered text-center">
                        <span class="label label-default" id="l2" style="display:none">Vanitas</span>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-5">
                        <div style="float:right; padding-top:5px">
                          <span class="label label-default" id="l1" style="display:none">Vanitas</span>
                        </div>
                      </div>
                      <div class="col-md-2" style="padding-left: 7px;">
                        <span class="glyphicon glyphicon-minus-sign" id="status"></span>
                      </div>
                      <div class="col-md-5" style="padding-top: 4px">
                        <span class="label label-default" id="l3" style="display:none">Vanitas</span>
                      </div>
                    </div>
                    <div class="row" style="height:50px">
                      <div class="pagination-centered text-center">
                        <span class="label label-default" id="l0">@name</span>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <span class="badge evaluation player3">Full House</span>
                    <div style="width:100px; float:right" id="p3">
                      <div id="p3-card-4"></div>
                      <div id="p3-card-3"></div>
                      <div id="p3-card-2"></div>
                      <div id="p3-card-1"></div>
                      <div id="p3-card-0"></div>
                    </div>
                  </div>
              </div>
              <div class="row">
                <span class="badge evaluation player0">Full House</span>
                <div class="col-md-6 col-md-offset-2" style="width: 460px;" id="p0">
                  <div id="p0-card-0"></div>
                  <div id="p0-card-1"></div>
                  <div id="p0-card-2"></div>
                  <div id="p0-card-3"></div>
                  <div id="p0-card-4"></div>
                </div>
                <div class="col-md-2">
                  <div style="height:15px"></div>
                  <button type="button" class="btn btn-default btn-block" id="exchange" disabled="disabled">Exchange</button>
                  <button type="button" class="btn btn-primary btn-block" disabled="disabled">Sth else</button>
                </div>
              </div>
          </div>

        </div><!--/span-->

        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
          <div class="well sidebar-nav" style="height: 593px;">


      <table class="table table-condensed players">
        <thead>
          <tr>
            <th>Nick</th>
            <th>Cash</th>
            <th>Wins</th>
          </tr>
        </thead>
        <tbody id="scoretable">
          <tr id="p0">
            <td>@name</td>
            <td>0</td>
            <td>0</td>
          </tr>
          <tr id="p1" class="empty">
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr id="p2" class="empty">
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr id="p3" class="empty">
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>



      <table class="table" id="console">
        <thead>
          <tr>
            <th>Console</th>
          </tr>
        </thead>
        <tbody>
          <tr style="height:330px">
            <td></td>
          </tr>
        </tbody>
      </table>
      <form action="http://localhost:9000/">
          <button type="submit" type="button" class="btn btn-danger btn-lg btn-block">Quit game</button>
      </form>
          </div><!--/.well -->
        </div><!--/span-->
      </div><!--/row-->

    </div><!--/.container-->

<div class="modal fade" id="auction1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Make your bet</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4"><button type="button" class="btn btn-default btn-lg btn-block" id="auction1_check">Check</button></div>
          <div class="col-md-4">
            <button type="button" class="btn btn-default btn-lg btn-block" id="auction1_bet">Bet</button>
            <div class="form-group">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="input-group" style="padding-top: 10px; margin-bottom: 25px;">
                            <input type="text" id="spinEdit1" class="form-control" style="width:110px"/>
                        </div>
                    </div>
                </div>
            </div>
          </div>
          <div class="col-md-4"><button type="button" class="btn btn-default btn-lg btn-block" id="auction1_fold">Fold</button></div>
        </div>
        <div class="row">
          <div class="col-md-6"><p class="text-center"><strong>Your current bet:</strong> <em id="a1_your_bet">456</em></p></div>
          <div class="col-md-6"><p class="text-center"><strong>Highest bet:</strong> <em id="a1_high_bet">456</em></p></p></div>
        </div>
        <div class="row">
          <div class="col-md-6"><p class="text-center"><strong>Your money:</strong> <em id="a1_your_money">456</em></p></p></div>
          <div class="col-md-6"><p class="text-center"><strong>Pool:</strong> <em id="a1_pool">456</em></p></p></div>
        </div>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" id="auction2">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Make your bet</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4"><button type="button" class="btn btn-default btn-lg btn-block" id="auction2_call">Call</button></div>
          <div class="col-md-4">
            <button type="button" class="btn btn-default btn-lg btn-block" id="auction2_raise">Raise</button>
            <div class="form-group">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="input-group" style="padding-top: 10px; margin-bottom: 25px;">
                            <input type="text" id="spinEdit2" class="form-control" style="width:110px"/>
                        </div>
                    </div>
                </div>
            </div>
          </div>
          <div class="col-md-4"><button type="button" class="btn btn-default btn-lg btn-block" id="auction2_fold">Fold</button></div>
        </div>
        <div class="row">
          <div class="col-md-6"><p class="text-center"><strong>Your current bet:</strong> <em id="a2_your_bet">456</em></p></div>
          <div class="col-md-6"><p class="text-center"><strong>Highest bet:</strong> <em id="a2_high_bet">456</em></p></p></div>
        </div>
        <div class="row">
          <div class="col-md-6"><p class="text-center"><strong>Your money:</strong> <em id="a2_your_money">456</em></p></p></div>
          <div class="col-md-6"><p class="text-center"><strong>Pool:</strong> <em id="a2_pool">456</em></p></p></div>
        </div>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" id="auction3">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Make your bet</h4>
      </div>
      <div class="modal-body">
        <div class="row" style="margin-bottom: 80px">
          <div class="col-md-6"><button type="button" class="btn btn-default btn-lg btn-block" id="auction3_allin">All In</button></div>
          <div class="col-md-6"><button type="button" class="btn btn-default btn-lg btn-block" id="auction3_fold">Fold</button></div>
        </div>
        <div class="row">
          <div class="col-md-6"><p class="text-center"><strong>Your current bet:</strong> <em id="a3_your_bet">456</em></p></div>
          <div class="col-md-6"><p class="text-center"><strong>Highest bet:</strong> <em id="a3_high_bet">456</em></p></p></div>
        </div>
        <div class="row">
          <div class="col-md-6"><p class="text-center"><strong>Your money:</strong> <em id="a3_your_money">456</em></p></p></div>
          <div class="col-md-6"><p class="text-center"><strong>Pool:</strong> <em id="a3_pool">456</em></p></p></div>
        </div>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster
    <script src="@routes.Assets.at("javascripts/jquery.js")" type="text/javascript"></script> -->
    <script src="@routes.Assets.at("javascripts/bootstrap.min.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/offcanvas.js")" type="text/javascript"></script>
    <!--<script src="@routes.Assets.at("javascripts/poker.js")" type="text/javascript"></script>-->
    <script src="@routes.Assets.at("javascripts/jquery.json-2.4.min.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/modal.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/jquery.websocket-0.0.1.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/bootstrap-spinedit.js")" type="text/javascript"></script>

    <!-- scalable cards templates -->
<script id="card-back" type="text/x-mustache-template">
  <div class="card-back"><span class="middle_center"><img src="@routes.Assets.at("playing-cards/faces/back.png")"/></span></div>
</script>
<script id="card-two" type="text/x-mustache-template">
  <div class="card-two">
    <div class="corner top"><span class="number">2</span><span>{{{suit.symbol}}}</span></div><span class="suit top_center">{{{suit.symbol}}}</span><span class="suit bottom_center">{{{suit.symbol}}}</span>
    <div class="corner bottom"><span class="number">2</span><span>{{{suit.symbol}}}</span></div>
  </div>
</script>
<script id="card-three" type="text/x-mustache-template">
  <div class="card-three">
    <div class="corner top"><span class="number">3</span><span>{{{suit.symbol}}}</span></div><span class="suit top_center">{{{suit.symbol}}}</span><span class="suit middle_center">{{{suit.symbol}}}</span><span class="suit bottom_center">{{{suit.symbol}}}</span>
    <div class="corner bottom"><span class="number">3</span><span>{{{suit.symbol}}}</span></div>
  </div>
</script>
<script id="card-four" type="text/x-mustache-template">
  <div class="card-four">
    <div class="corner top"><span class="number">4</span><span>{{{suit.symbol}}}</span></div><span class="suit top_left">{{{suit.symbol}}}</span><span class="suit top_right">{{{suit.symbol}}}</span><span class="suit bottom_left">{{{suit.symbol}}}</span><span class="suit bottom_right">{{{suit.symbol}}}</span>
    <div class="corner bottom"><span class="number">4</span><span>{{{suit.symbol}}}</span></div>
  </div>
</script>
<script id="card-five" type="text/x-mustache-template">
  <div class="card-five">
    <div class="corner top"><span class="number">5</span><span>{{{suit.symbol}}}</span></div><span class="suit top_left">{{{suit.symbol}}}</span><span class="suit top_right">{{{suit.symbol}}}</span><span class="suit middle_center">{{{suit.symbol}}}</span><span class="suit bottom_left">{{{suit.symbol}}}</span><span class="suit bottom_right">{{{suit.symbol}}}</span>
    <div class="corner bottom"><span class="number">5</span><span>{{{suit.symbol}}}</span></div>
  </div>
</script>
<script id="card-six" type="text/x-mustache-template">
  <div class="card-six">
    <div class="corner top"><span class="number">6</span><span>{{{suit.symbol}}}</span></div><span class="suit top_left">{{{suit.symbol}}}</span><span class="suit top_right">{{{suit.symbol}}}</span><span class="suit middle_left">{{{suit.symbol}}}</span><span class="suit middle_right">{{{suit.symbol}}}</span><span class="suit bottom_left">{{{suit.symbol}}}</span><span class="suit bottom_right">{{{suit.symbol}}}</span>
    <div class="corner bottom"><span class="number">6</span><span>{{{suit.symbol}}}</span></div>
  </div>
</script>
<script id="card-seven" type="text/x-mustache-template">
  <div class="card-seven">
    <div class="corner top"><span class="number">7</span><span>{{{suit.symbol}}}</span></div><span class="suit top_left">{{{suit.symbol}}}</span><span class="suit top_right">{{{suit.symbol}}}</span><span class="suit middle_left">{{{suit.symbol}}}</span><span class="suit middle_top">{{{suit.symbol}}}</span><span class="suit middle_right">{{{suit.symbol}}}</span><span class="suit bottom_left">{{{suit.symbol}}}</span><span class="suit bottom_right">{{{suit.symbol}}}</span>
    <div class="corner bottom"><span class="number">7</span><span>{{{suit.symbol}}}</span></div>
  </div>
</script>
<script id="card-eight" type="text/x-mustache-template">
  <div class="card-eight">
    <div class="corner top"><span class="number">8</span><span>{{{suit.symbol}}}</span></div><span class="suit top_left">{{{suit.symbol}}}</span><span class="suit top_right">{{{suit.symbol}}}</span><span class="suit middle_left">{{{suit.symbol}}}</span><span class="suit middle_top">{{{suit.symbol}}}</span><span class="suit middle_right">{{{suit.symbol}}}</span><span class="suit middle_bottom">{{{suit.symbol}}}</span><span class="suit bottom_left">{{{suit.symbol}}}</span><span class="suit bottom_right">{{{suit.symbol}}}</span>
    <div class="corner bottom"><span class="number">8</span><span>{{{suit.symbol}}}</span></div>
  </div>
</script>
<script id="card-nine" type="text/x-mustache-template">
  <div class="card-nine">
    <div class="corner top"><span class="number">9</span><span>{{{suit.symbol}}}</span></div><span class="suit top_left">{{{suit.symbol}}}</span><span class="suit top_right">{{{suit.symbol}}}</span><span class="suit middle_top_left">{{{suit.symbol}}}</span><span class="suit middle_center">{{{suit.symbol}}}</span><span class="suit middle_top_right">{{{suit.symbol}}}</span><span class="suit bottom_left">{{{suit.symbol}}}</span><span class="suit bottom_right">{{{suit.symbol}}}</span><span class="suit middle_bottom_left">{{{suit.symbol}}}</span><span class="suit middle_bottom_right">{{{suit.symbol}}}</span>
    <div class="corner bottom"><span class="number">9</span><span>{{{suit.symbol}}}</span></div>
  </div>
</script>
<script id="card-ten" type="text/x-mustache-template">
  <div class="card-ten">
    <div class="corner top"><span class="number">10</span><span>{{{suit.symbol}}}</span></div><span class="suit top_left">{{{suit.symbol}}}</span><span class="suit top_right">{{{suit.symbol}}}</span><span class="suit middle_top_left">{{{suit.symbol}}}</span><span class="suit middle_top_center">{{{suit.symbol}}}</span><span class="suit middle_top_right">{{{suit.symbol}}}</span><span class="suit bottom_left">{{{suit.symbol}}}</span><span class="suit bottom_right">{{{suit.symbol}}}</span><span class="suit middle_bottom_center">{{{suit.symbol}}}</span><span class="suit middle_bottom_left">{{{suit.symbol}}}</span><span class="suit middle_bottom_right">{{{suit.symbol}}}</span>
    <div class="corner bottom"><span class="number">10</span><span>{{{suit.symbol}}}</span></div>
  </div>
</script>
<script id="card-jack" type="text/x-mustache-template">
  <div class="card-jack">
    <div class="corner top"><span class="number">J</span><span>{{{suit.symbol}}}</span></div><span class="face middle_center"><img src="@routes.Assets.at("playing-cards/faces/face-jack-{{suit.name}}.png")"></span>
    <div class="corner bottom"><span class="number">J</span><span>{{{suit.symbol}}}</span></div>
  </div>
</script>
<script id="card-queen" type="text/x-mustache-template">
  <div class="card-queen">
    <div class="corner top"><span class="number">Q</span><span>{{{suit.symbol}}}</span></div><span class="face middle_center"><img src="@routes.Assets.at("playing-cards/faces/face-queen-{{suit.name}}.png")"></span>
    <div class="corner bottom"><span class="number">Q</span><span>{{{suit.symbol}}}</span></div>
  </div>
</script>
<script id="card-king" type="text/x-mustache-template">
  <div class="card-king">
    <div class="corner top"><span class="number">K</span><span>{{{suit.symbol}}}</span></div><span class="face middle_center"><img src="@routes.Assets.at("playing-cards/faces/face-king-{{suit.name}}.png")"></span>
    <div class="corner bottom"><span class="number">K</span><span>{{{suit.symbol}}}</span></div>
  </div>
</script>
<script id="card-ace" type="text/x-mustache-template">
  <div class="card-ace">
    <div class="corner top"><span class="number">A</span><span>{{{suit.symbol}}}</span></div><span class="suit middle_center">{{{suit.symbol}}}</span>
    <div class="corner bottom"><span class="number">A</span><span>{{{suit.symbol}}}</span></div>
  </div>
</script>

  <script type="text/javascript">
$(document).ready(function(){
  function drawCard(target, rank, suit, width, front, number) {
    if (width != null) {
      target.css({
        'width': width,
        'font-size': width * 12.5 / 200
      });
    }

    target.addClass('card');
    target.attr('card', target.attr('id'));
    target.attr('number', number);

    new PlayingCards.CardView({
      el: target,
      model: new PlayingCards.CardModel({
        rank: PlayingCards.RANK[rank],
        suit: PlayingCards.SUIT[suit],
        front: front
      }),
      templates: new PlayingCards.Templates()
    }).render();
  }

  function clearHand(player) {
    if (player == 0 || player == 1 ||
        player == 2 || player == 3) {
      $("div#p" + player).html('<div id="p' + player + '-card-0"></div>' +
                            '<div id="p' + player + '-card-1"></div>' +
                            '<div id="p' + player + '-card-2"></div>' +
                            '<div id="p' + player + '-card-3"></div>' +
                            '<div id="p' + player + '-card-4"></div>');
    }
  }

  function moveCardUp(player, card) {
    var key = "margin";
    var val = "0px";
    if (player == 0) {
      key = "margin-top";
      val = "-30px";
    }
    else if (player == 1) {
      key = "margin-left";
      val = "30px";
    }
    else if (player == 2) {
      key = "margin-top";
      val = "30px";
    }
    else if (player == 3) {
      key = "margin-left";
      val = "-30px";
    }
    if (player == 0 || player == 1 ||
        player == 2 || player == 3) {
      $("[card='p" + player + "-card-" + card + "']").css(key, val);
    }
  }

  function moveCardDown(player, card) {
    var key = "margin";
    if (player == 0) {
      key = "margin-top";
    }
    else if (player == 1) {
      key = "margin-left";
    }
    else if (player == 2) {
      key = "margin-top";
    }
    else if (player == 3) {
      key = "margin-left";
    }
    if (player == 0 || player == 1 ||
        player == 2 || player == 3) {
      $("[card='p" + player + "-card-" + card + "']").css(key, "0px");
    }
  }

  function drawCards(player, cards, show) {
    if (player == 0) {
      for (var i=0; i < (cards.length > 5 ? 5 : cards.length); i++)
      {
        drawCard($('#p0-card-' + i), cards[i]["rank"], cards[i]["suit"], 80, show, cards["number"]);
      }
    }
    else if (player == 1) {
      for (var i=0; i < (cards.length > 5 ? 5 : cards.length); i++)
      {
        drawCard($('#p1-card-' + i), cards[i]["rank"], cards[i]["suit"], 80, show, cards["number"]);
        $("[card='p1-card-" + i + "']").css("transform", "rotate(90deg)");
        if (i > 0) {
          $("[card='p1-card-" + i + "']").css({
            "transform": "rotate(90deg)",
            "margin-top": "-90px"
          });
        }
      }
    }
    else if (player == 2) {
      for (var i=0; i < (cards.length > 5 ? 5 : cards.length); i++)
      {
        drawCard($('#p2-card-' + i), cards[i]["rank"], cards[i]["suit"], 80, show, cards["number"]);
      }
    }
    else if (player == 3) {
      for (var i=0; i < (cards.length > 5 ? 5 : cards.length); i++)
      {
        drawCard($('#p3-card-' + i), cards[i]["rank"], cards[i]["suit"], 80, show, cards["number"]);
        $("[card='p3-card-" + i + "']").css("transform", "rotate(90deg)");
          $("[card='p3-card-" + i + "']").css({
            "transform": "rotate(90deg)",
            "z-index": (5 - i)
          });
          if (i > 0) {
            $("[card='p3-card-" + i + "']").css({
              "margin-top": "-90px",
            });
          }
      }
    }
  }

  function consoleMsg(type, text) {
    if (type == "normal") {
      $("#console tbody").append('<tr><td>' + text + '</td></tr>');
    }
    else if (type == "success") {
      $("#console tbody").append('<tr class="success"><td>' + text + '</td></tr>');
    }
    else if (type == "warning") {
      $("#console tbody").append('<tr class="warning"><td>' + text + '</td></tr>');
    }
    else if (type == "danger") {
      $("#console tbody").append('<tr class="danger"><td>' + text + '</td></tr>');
    }
    $("#console tbody").scrollTop($("#console tbody").scrollTop() + 100);
  }

  function vanishPlayer(player) {
    $("span.badge.evaluation.player" + player).hide();
    if (player == 0) {
      clearHand(0);
      $("span#l0").hide();
      $("tr#p0").html("<td></td><td></td>");
      $("tr#p0").addClass("empty");
    }
    else if (player == 1) {
      clearHand(1);
      $("span#l1").hide();
      $("tr#p1").html("<td></td><td></td>");
      $("tr#p1").addClass("empty");
    }
    else if (player == 2) {
      clearHand(2);
      $("span#l2").hide();
      $("tr#p2").html("<td></td><td></td>");
      $("tr#p2").addClass("empty");
    }
    else if (player == 3) {
      clearHand(3);
      $("span#l3").hide();
      $("tr#p3").html("<td></td><td></td>");
      $("tr#p3").addClass("empty");
    }
  }

  function showEvaluation(player, name) {
    if (player == 0 || player == 1 ||
        player == 2 || player == 3) {
      $("span.badge.evaluation.player" + player).text(name);
      $("span.badge.evaluation.player" + player).show();
    }
  }

  function showPlayer(player, name) {
    if (player == 0) {
      $("span#l0").text(name);
      $("span#l0").show();
      $("tr#p0").removeClass("empty");
      $("tr#p0").html("<td>" + name + "</td><td>0</td>");
    }
    else if (player == 1) {
      $("span#l1").text(name);
      $("span#l1").show();
      $("tr#p1").removeClass("empty");
      $("tr#p1").html("<td>" + name + "</td><td>0</td>");
    }
    else if (player == 2) {
      $("span#l2").text(name);
      $("span#l2").show();
      $("tr#p2").removeClass("empty");
      $("tr#p2").html("<td>" + name + "</td><td>0</td>");
    }
    else if (player == 3) {
      $("span#l3").text(name);
      $("span#l3").show();
      $("tr#p3").removeClass("empty");
      $("tr#p3").html("<td>" + name + "</td><td>0</td>");
    }
  }

  function revealCards() {
    myTurn = false;
    $("button#exchange").prop('disabled', true);
    $("span[id^='l']").each(function( index ) {
      $(this).attr("class", "label label-default");
    });
    $("span#status").attr("class", "glyphicon glyphicon-minus-sign");
  }

  var myTurn = false;
  var auctionOptions;

  function changeTurn(player, options) {
    $("span.badge.evaluation").hide();
    $("button#exchange").prop('disabled', true);
    $("span[id^='l']").each(function( index ) {
      $(this).attr("class", "label label-default");
    });
    $("button#exchange").prop('disabled', true);
    myTurn = false;
    if (player == 0) {
      $("span#l0").removeClass("label-default");
      $("span#l0").addClass("label-success");
      $("span#status").attr("class", "glyphicon glyphicon-circle-arrow-down");
      if (options["phase"] == 3) {
        $("button#exchange").prop('disabled', false);
        myTurn = true;
      }
      else if (options["phase"] == 1)
      {
      }
      else if (options["phase"] == 2 || options["phase"] == 4) {
        showModal(options);
      }
    }
    else if (player == 1) {
      $("span#l1").removeClass("label-default");
      $("span#l1").addClass("label-success");
      $("span#status").attr("class", "glyphicon glyphicon-circle-arrow-left");
    }
    else if (player == 2) {
      $("span#l2").removeClass("label-default");
      $("span#l2").addClass("label-success");
      $("span#status").attr("class", "glyphicon glyphicon-circle-arrow-up");
    }
    else if (player == 3) {
      $("span#l3").removeClass("label-default");
      $("span#l3").addClass("label-success");
      $("span#status").attr("class", "glyphicon glyphicon-circle-arrow-right");
    }
  }

  function updateResults(player, name, points, wins) {
    if (player == 0) {
      $("tr#p0").html("<td>" + name + "</td><td>" + points + "</td><td>" + wins + "</td>");
    }
    else if (player == 1) {
      $("tr#p1").html("<td>" + name + "</td><td>" + points + "</td><td>" + wins + "</td>");
    }
    else if (player == 2) {
      $("tr#p2").html("<td>" + name + "</td><td>" + points + "</td><td>" + wins + "</td>");
    }
    else if (player == 3) {
      $("tr#p3").html("<td>" + name + "</td><td>" + points + "</td><td>" + wins + "</td>");
    }
  }

  function unbindAuctionButtons() {
    $("button#auction1_check").unbind();
    $("button#auction1_bet").unbind();
    $("button#auction1_fold").unbind();
    $("button#auction2_call").unbind();
    $("button#auction2_raise").unbind();
    $("button#auction2_fold").unbind();
    $("button#auction3_allin").unbind();
    $("button#auction3_fold").unbind();
  }

  function showModal(options) {
    unbindAuctionButtons();

    if (options["check"] &&  options["bet"]) {
      $('#spinEdit1').spinedit('setMinimum', 0);
      $('#spinEdit1').spinedit('setMaximum', parseInt(options["yourmoney"]));
      $('#a1_your_bet').text(options["yourbet"]);
      $('#a1_high_bet').text(options["maxbet"]);
      $('#a1_your_money').text(options["yourmoney"]);
      $('#a1_pool').text(options["pool"]);

      $("button#auction1_check").bind("click", function(){
        $("#auction1").modal("hide");
        unbindAuctionButtons();
        ws.send(JSON.stringify(
          {
            type: "licitation",
            operation: "check"
          }
        ));
      });
      $("button#auction1_bet").bind("click", function(){
        $("#auction1").modal("hide");
        unbindAuctionButtons();
        ws.send(JSON.stringify(
          {
            type: "licitation",
            operation: "bet",
            value: $("#spinEdit1").val()
          }
        ));
      });
      $("button#auction1_fold").bind("click", function(){
        $("#auction1").modal("hide");
        unbindAuctionButtons();
        ws.send(JSON.stringify(
          {
            type: "licitation",
            operation: "fold"
          }
        ));
      });

      $("#auction1").modal("show");
    }
    else if (options["call"]) {
      $('#a2_your_bet').text(options["yourbet"]);
      $('#a2_high_bet').text(options["maxbet"]);
      $('#a2_your_money').text(parseInt(options["yourmoney"]));
      $('#a2_pool').text(options["pool"]);

      $("button#auction2_call").bind("click", function(){
        $("#auction2").modal("hide");
        unbindAuctionButtons();
        ws.send(JSON.stringify(
          {
            type: "licitation",
            operation: "call"
          }
        ));
      });
      $("button#auction2_fold").bind("click", function(){
        $("#auction2").modal("hide");
        unbindAuctionButtons();
        ws.send(JSON.stringify(
          {
            type: "licitation",
            operation: "fold"
          }
        ));
      });

      if (options["raise"]) {
        $("button#auction2_raise").prop('disabled', false);
        $('#spinEdit2').prop('disabled', false);
        $('#spinEdit2').spinedit('setMinimum', 0);
        $('#spinEdit2').spinedit('setMaximum', parseInt(options["yourmoney"]));
        $("button#auction2_raise").bind("click", function(){
          $("#auction2").modal("hide");
          unbindAuctionButtons();
          ws.send(JSON.stringify(
            {
              type: "licitation",
              operation: "raise",
              value: $("#spinEdit2").val()
            }
          ));
        });
      }
      else {
        $("button#auction2_raise").prop('disabled', true);
        $('#spinEdit2').prop('disabled', true);
      }
      $("#auction2").modal("show");
    }
    else if (options["allin"]) {
      $('#a3_your_bet').text(options["yourbet"]);
      $('#a3_high_bet').text(options["maxbet"]);
      $('#a3_your_money').text(options["yourmoney"]);
      $('#a3_pool').text(parseInt(options["pool"]));

      $("button#auction3_fold").bind("click", function(){
        $("#auction3").modal("hide");
        unbindAuctionButtons();
        ws.send(JSON.stringify(
          {
            type: "licitation",
            operation: "fold"
          }
        ));
      });
      $("button#auction3_allin").bind("click", function(){
        $("#auction3").modal("hide")
        unbindAuctionButtons();
        ws.send(JSON.stringify(
          {
            type: "licitation",
            operation: "allin"
          }
        ));;
      });

      $("#auction3").modal("show");
    }
  }


  var movedCards = [];
  var playerNames = {"@name":0};
  var playersIndex = 0;

  $("#console tbody").scrollTop($("#console tbody").scrollTop() + 550);

  var ws;
  if ("WebSocket" in window)
  {
     ws = new WebSocket("@play.Play.application().configuration().getString("webSocketUrl")@uuid");
     ws.onopen = function()
     {
        consoleMsg("success", "Connection established.");
     };
     ws.onmessage = function(e)
     {
        console.log(e.data);
        var data = JSON.parse(e.data);
        if (data["type"] == "consoleMsg") {
          consoleMsg(data["msgType"], data["msg"]);
        }
        else if (data["type"] == "movedCardUp") {
          moveCardUp(playerNames[data["player"]], data["card"]);
        }
        else if (data["type"] == "moveCardDown") {
          moveCardDown(playerNames[data["player"]], data["card"]);
        }
        else if (data["type"] == "playerLeft") {
          vanishPlayer(playerNames[data["player"]]);
          delete playerNames[data["player"]];
          playersIndex--;
        }
        else if (data["type"] == "changeTurn") {
          changeTurn(playerNames[data["player"]], data["options"]);
          auctionOptions = data["options"];
        }
        else if (data["type"] == "newPlayer") {
          playersIndex++;
          playerNames[data["player"]] = playersIndex;
          showPlayer(playerNames[data["player"]], data["player"]);
        }
        else if (data["type"] == "drawHand") {
          drawCards(
            playerNames[data["player"]],
            data["cards"],
            data["show"]
          );
        }
        else if (data["type"] == "resetHand") {
          clearHand(playerNames[data["player"]]);
          drawCards(
            playerNames[data["player"]],
            data["cards"],
            data["show"]
          );
          if (typeof data["reveal"] != "undefined") {
            revealCards();
          }
        }
        else if (data["type"] == "newResults") {
          updateResults(playerNames[data["player"]], data["player"], data["points"], data["wins"]);
        }
        else if (data["type"] == "showEvaluations") {
          $.each(data["evaluations"], function(index, value) {
            showEvaluation(playerNames[value["player"]], value["evaluationName"]);
          });
        }
        else if (data["type"] == "licitateError")
        {
          changeTurn(playerNames[data["player"]], 1);
        }
     };
     ws.onclose = function()
     {
        consoleMsg("danger", "Connection lost.");
     };
     ws.onerror = function()
     {
        consoleMsg("warning", "Socket error.");
     };
  }
  else
  {
    consoleMsg("danger", "WebSocket NOT supported by your Browser!");
  }

  $("[card^='p0']").live("click", function(e){
    if (myTurn) {
      var c = parseInt($(this).attr("card").charAt($(this).attr("card").length - 1));
      // var n = parseInt($(this).attr("number"));
      var pos = movedCards.indexOf(c);
      if (pos == -1) {
          if (movedCards.length < 4) {
          moveCardUp(0, c);
          movedCards.push(c);
          // ws.send(JSON.stringify(
          //     {
          //       type: "cardMovedUp",
          //       card: c
          //     }
          // ));
        }
      }
      else {
        movedCards.splice(pos, 1);
        moveCardDown(0, c);
        // ws.send(JSON.stringify(
        //     {
        //       type: "cardMovedDown",
        //       card: c
        //     }
        // ));
      }
    }
  });

  $("button#exchange").live("click", function(e){
    if (myTurn) {
       ws.send(JSON.stringify(
          {
            type: "exchangeCards",
            cards: movedCards
          }
      ));
      movedCards = [];
    }
  });

  $("#auction1").modal({
    backdrop: 'static',
    keyboard: false,
    show: false
  });
  $("#auction2").modal({
    backdrop: 'static',
    keyboard: false,
    show: false
  });
  $("#auction3").modal({
    backdrop: 'static',
    keyboard: false,
    show: false
  });
  $("#spinEdit1").spinedit();
  $("#spinEdit2").spinedit();

  // $('#spinEdit').spinedit('setMinimum', -10000);
  // $('#spinEdit').spinedit('setMaximum', 10000);

});
  </script>

  </body>
</html>
